<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/html/reset.css">
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
            text-align: center;
        }

        .infor {
            display: flex;
            flex-flow: column nowrap;
        }

        .infor .luru-infor {
            margin: 50px 0;
        }

        input,
        select:focus {
            outline: none;
        }

        input {
            width: 60px;
        }

        select,
        input {
            border: 1px solid rgb(174, 218, 229);
            padding: 0 5px;
            height: 22px;
            border-radius: 4px;
            margin-right: 15px;
        }

        .btn {
            background-color: rgb(49, 43, 101);
            color: white;
            border-radius: 5px;
            width: 50px;
            font-size: 12px;
        }

        .jiuye {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
        }

        .table {
            margin: 20px 0;
            width: 710px;
        }

        thead {
            background-color: aquamarine;
        }

        thead th {
            font-weight: normal;
            font-size: 16px;
            height: 40px;
        }

        tbody td {
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="infor">
            <h2>新增学员</h2>
            <div class="luru-infor">
                <form action="" class="infos">
                    姓名：<input type="text" id="names" name="nams">
                    年龄：<input type="text" id="age" name="age">
                    性别：<select name="sex" id="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    薪资：<input type="text" id="money" name="money">
                    就业城市：<select name="city" id="city">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="长沙">长沙</option>
                        <option value="广东">广东</option>
                        <option value="杭州">杭州</option>
                        <option value="深圳">深圳</option>
                        <option value="长春">长春</option>
                    </select>
                    <button class="btn">录入</button>
                </form>

            </div>

            <div class="jiuye">
                <h2>就业榜</h2>
                <table border="1" class="table">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>薪资</th>
                            <th>就业城市</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 获取元素 
        const names = document.querySelector('#names')
        const age = document.querySelector('#age')
        const sex = document.querySelector('#sex')
        const city = document.querySelector('#city')
        const money = document.querySelector('#money')

        //获取标签
        const btn = document.querySelector('.btn')
        const luruinfor = document.querySelector('.luru-infor')
        const from = document.querySelector('.infos')
        const tbody = document.querySelector('tbody')

        // console.log(luruinfor.children);

        // 声明一个空的数组 增加和删除都是数组操作
        let newarr = []

        function render() {
            // 清空tbody ,把最新的数组追加上去
            tbody.innerHTML = ''

            for (let i = 0; i < newarr.length; i++) {
                //    生成tr
                const tr = document.createElement('tr')
                tr.innerHTML = `
                        <tr>
                            <td>${newarr[i].stuId}</td>
                            <td>${newarr[i].names}</td>
                            <td>${newarr[i].age}</td>
                            <td>${newarr[i].sex}</td>
                            <td>${newarr[i].money}</td>
                            <td>${newarr[i].city}</td>
                            <td><a href="#" data-id='${i}'>删除</a></td>
                        </tr>
                `
                // 追加给父元素
                tbody.appendChild(tr)
            }
        }
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                // 得到当前data属性
                // e.target.dataset.id
                newarr.splice(e.target.dataset.id, 1)
                // 重新渲染
                render()
            }
        })
        from.addEventListener('submit', function (e) {
            // 阻止表单默认行为 不跳转
            e.preventDefault()

            // 这里进行表单验证
            // 获取表单元素
            // 判断要先执行 不然渲染完了就判断不到了
            const item = document.querySelectorAll('[name]')
            for (let i = 0; i < item.length; i++) {
                if (item[i].value === '') {
                    return alert('输入内容不能为空')
                }

            }

            // console.log(11);
            const obj = {
                stuId: newarr.length + 1,
                names: names.value,
                age: age.value,
                sex: sex.value,
                money: money.value,
                city: city.value,
            }
            // 追加给数组
            newarr.push(obj)
            // console.log(newarr)
            // console.log(obj);
            // 清空表单
            this.reset()
            // 调用函数
            render()
        })
    </script>
</body>

</html>